<template>
  <a-card title="数据源管理" :bordered="false">
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :label-col="FORM_LAYOUT.labelCol"
      :wrapper-col="FORM_LAYOUT.wrapperCol">
      <a-row class="form-row" :gutter="16">
        <a-col :sm="24">
          <a-form-model-item label="名称" :labelCol="FULL_FORM_LAYOUT.labelCol" :wrapperCol="FULL_FORM_LAYOUT.wrapperCol" prop="name">
            <a-input v-model="model.name"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24">
          <a-form-model-item label="url" :labelCol="FULL_FORM_LAYOUT.labelCol" :wrapperCol="FULL_FORM_LAYOUT.wrapperCol" prop="url">
            <a-input v-model="model.url"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="用户名" prop="username">
            <a-input v-model="model.username" autocomplete="off"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="密码" prop="password">
            <a-input-password v-model="model.password" autocomplete="new-password"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="状态" prop="status">
            <e-dict-radio type="commonStatus" v-model="model.status"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24">
          <a-form-model-item label="描述" :labelCol="FULL_FORM_LAYOUT.labelCol" :wrapperCol="FULL_FORM_LAYOUT.wrapperCol" prop="description">
            <a-textarea v-model="model.description"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24">
          <div class="input-btn-group">
            <e-btn-save permissions="sys:data:source:save" :loading="saveLoading" :click-callback="save"/>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import { FULL_FORM_LAYOUT, FORM_LAYOUT } from '@/utils/const/form'
import { get, add, save } from '@/api/sys/data/source'
import { saveSuccessTip } from '@/utils/tips'
import { isNotBlank } from '@/utils/util'
import EBtnSave from '@/components/Easy/general/BtnSave'
import EDictSelect from '@/components/Easy/data-entry/DictSelect'
import EDictRadio from '@/components/Easy/data-entry/DictRadio'

export default {
  name: 'SysDataSourceInput',
  components: {
    EDictRadio,
    EBtnSave,
    EDictSelect
  },
  data () {
    return {
      id: this.$route.query.id,

      FULL_FORM_LAYOUT: FULL_FORM_LAYOUT,
      FORM_LAYOUT: FORM_LAYOUT,

      // 表单
      saveLoading: false,
      model: { },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { max: 32, message: '名称不能超过32个字符', trigger: 'blur' }
        ],
        description: [
          { max: 256, message: '描述不能超过256个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        url: [
          { required: true, message: '请输入url', trigger: 'blur' },
          { max: 512, message: 'url不能超过512个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 64, message: '用户名不能超过64个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { max: 64, message: '密码不能超过64个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    if (isNotBlank(this.id)) {
      this.edit(this.id)
    } else {
      this.add()
    }
  },
  methods: {
    edit (id) {
      get(id).then((res) => {
        this.model = res.data
      })
    },
    add () {
      add().then((res) => {
        this.model = res.data
      })
    },
    save () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveLoading = true
          save(this.model).then((res) => {
            this.saveLoading = false
            saveSuccessTip()
            this.model = res.data
          }).catch(({ response }) => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
